<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- import Vue before Element -->
    <script th:src="@{js/vue.js}"></script>

    <!--    &lt;!&ndash; 引入样式 &ndash;&gt;-->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

    <!-- import JavaScript -->
    <script th:src="@{js/element.js}"></script>
    <!-- import CSS -->
    <link rel="stylesheet" th:href="@{css/element.css}">
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="2">
            <div class="grid1-1">
                <div class="grid1-1-1">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                </div>
                <div class="grid1-1-2">
                    <i class="el-icon-edit"></i>
                </div>
                <div class="grid1-1-2">
                    <i class="el-icon-share"></i>
                </div>
                <div class="grid1-1-2">
                    <i class="el-icon-chat-line-round"></i>
                </div>
                <div class="grid1-1-2">
                    <i class="el-icon-notebook-1"></i>
                </div>
                <div class="grid1-1-2">
                    <i class="el-icon-user"></i>
                </div>
                <div class="grid1-1-2">
                    <i class="el-icon-message"></i>
                </div>
                <div class="grid1-1-2">
                    <i class="el-icon-refresh"></i>
                </div>
                <div class="grid1-1-2">
                    <i class="el-icon-setting"></i>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="el-2">
                <el-row>
                    <el-col>
                        <div class="grid2-1">
                            <div class="grid2-1-1">
                                <el-row>
                                    <el-col :span="15">
                                        <el-input v-model="input" placeholder="查询"></el-input>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-button type="primary" icon="el-icon-search"></el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="grid2-2">2-2</div>
                    </el-col>
                </el-row>
            </div>
        </el-col>
        <el-col :span="16">
            <div>
                <div class="el-3">
                    <el-row>
                        <el-col>
                            <div class="grid3-1">&nbsp;&nbsp;用户信息XX</div>
                        </el-col>
                    </el-row>
                </div>
                <div class="m-message">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>
                            <p class="time"><span>23:46</span></p>
                            <div class="main">
                                <img class="avatar" width="30" height="30"
                                     src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                                <div class="text">
                                    Hello，这是一个基于Vue + Webpack构建的简单chat示例，聊天记录保存在localStorge。简单演示了Vue的基础特性和webpack配置。
                                </div>
                            </div>
                        </li>
                        <li>
                            <p class="time"><span>23:46</span></p>
                            <div class="main">
                                <img class="avatar" width="30" height="30"
                                     src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                                <div class="text">
                                    Hello，这是一个基于Vue + Webpack构建的简单chat示例，聊天记录保存在localStorge。简单演示了Vue的基础特性和webpack配置。
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div>
                    <el-row>
                        <el-col :span="1">
                            <div class="grid3-3">
                                &nbsp
                            </div>
                        </el-col>
                        <el-col :span="1">
                            <div class="grid3-3">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-col>
                        <el-col :span="1">
                            <div class="grid3-3">
                                <i class="el-icon-folder"></i>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="tron-grid3-4">
                    <el-row>
                        <el-col>
                            <div class="grid3-4">
                                <el-input class="my-input"
                                          type="textarea"
                                          :autosize="{ minRows: 3, maxRows: 3}"
                                          placeholder="请输入内容"
                                          v-model="textarea2">
                                </el-input>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="end">
                    <el-row>
                        <el-col :offset="20">
                            <div class="grid3-5">
                                <el-button type="success" size="mini" v-on:click="test">发送</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                textarea2: '',
                input: ''
            }
        },
        methods: {
            test: function () {
                this.websocket.send(this.textarea2)
                this.textarea2 = ""
            }
        },
        mounted() {
            if ('WebSocket' in window) {
                this.websocket = new WebSocket('ws://localhost:8999/websocket?id=1')
                // this.websocket.send("hello world")
                this.websocket.onmessage = function (event) {
                    console.log(event.data)
                }
            } else {
                alert('当前浏览器 Not support websocket')
            }
        }
    })
</script>
<style>
    body {
        padding: 0px;
        margin: 0px;
    }

    .grid1-1 {
        background: #303133;
        text-align: center;
        min-height: 500px;
    }

    .grid1-1-1 {
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .grid1-1-2 {
        height: 50px;
        color: #fbfdff;
        font-size: 25px;
        text-align: center;
    }

    .grid2-1 {
        text-align: center;
        height: 60px;
        background: #DDDDDD;
        /*border-right: solid 1px #cccccc;*/
    }

    .grid2-1-1 {
        padding-top: 10px;
        padding-left: 10px;
    }

    .grid2-2 {
        height: 440px;
        background: #DDDDDD;
    }

    .el-3 {
        font-size: 18px;
        /*min-width: 500px;*/
    }

    .grid3-1 {
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        background: #EEEEEE;
        border-bottom: solid 1px #cccccc;
    }

    .grid3-2 {
        height: 300px;
        background: #EEEEEE;
    }

    .grid3-3 {
        /*height: 40px;*/
        /*background: #F0F0F0;*/
    }

    .tron-grid3-4 {
        height: 90px;
    }

    .grid3-4 {

    }

    .grid3-5 {
        /*height: 71px;*/
        /*background: #fbfdff;*/
        /*border-bottom: solid 1px #a6a9ad;*/
    }

    .my-input .el-textarea__inner {
        -webkit-box-sizing: unset;
        border-radius: 0px;
        border: #fbfdff;
    }

    .end {
        margin-bottom: 0px;
        border-bottom: solid 1px #cccccc;
    }

    .m-message {
        height: 300px;
        box-sizing: border-box;
        padding: 10px 15px;
        overflow-y: scroll;
        background-color: #eee;
    }

    ul {
        list-style: none;
    }
    li{
        box-sizing: border-box;
        color: #4d4d4d;
        font: 14px/1.4em 'Helvetica Neue', Helvetica, 'Microsoft Yahei', Arial, sans-serif;
        display: list-item;
        text-align: -webkit-match-parent;
    }
    .text{
        display: inline-block;
        position: relative;
        padding: 0 10px;
        max-width: calc(100% - 40px);
        min-height: 30px;
        line-height: 2.5;
        font-size: 9pt;
        text-align: left;
        word-break: break-all;
        background-color: #fafafa;
        border-radius: 4px;
    }
    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    .main{
        color: #72767b;
        float:right;
    }

</style>
</html>